<template>
    <div class="item-one" ref="itemOne">
        <div class="title">
            <span>门店退款统计</span>
            <div>
                <el-button type="primary" :disabled="exxxx" @click="merchantexcel()"><i class="el-icon-download"></i>导出
                </el-button>
                <el-button icon="el-icon-refresh" @click="refresh()"></el-button>
            </div>
        </div>
        <div class="container">
            <div class="screeningBox">
                <div class="leftBox">
                    <div class="leftitem">
                       
                        <div class="block">
                            <el-date-picker
                                    v-model="date"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :clearable='false'
                                    :picker-options="pickerOptions2"
                                    :default-time="['00:00:00', '23:59:59']"
                            >
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="leftitem" v-if="userinfo.rolesId != 5 &&userinfo.rolesId != 6 ">
                        <el-form ref="conditions" :model="conditions" label-width="80px">
                            <el-input class="merchants" v-model.trim="conditions.keywords"
                                      placeholder="商户号/商户名称"></el-input>
                        </el-form>
                    </div>
                </div>
                <div class="rightBox">
                    <div class="rightitem" v-if="userinfo.rolesId != 6">
                        <el-form ref="conditions" :model="conditions" label-width="80px">
                            <el-input class="merchants" v-model.trim="conditions.searchvalue"
                                      placeholder="门店号/门店名称"></el-input>
                        </el-form>
                    </div>
                    <div class="rightitem"
                         v-if="userinfo.rolesId == 1 || userinfo.rolesId == 2 || userinfo.rolesId == 8 || userinfo.rolesId == 9">
                        <el-form label-width="80px">
                          
                            <el-autocomplete class="servicename" v-model.trim="tagname"
                                             :fetch-suggestions="querySearch_tag" @select="serviceid_tag"
                                             placeholder="门店标签名" :trigger-on-focus="false"></el-autocomplete>
                        </el-form>
                    </div>
                    <div class="rightitem">
                        <el-button icon="el-icon-search" type="primary" @click="soso">搜索</el-button>
                        <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
                    </div>
                </div>
            </div>
            <div class="statistical">
                <div class="statisticalitem">
                    <div>总退款金额</div>
                    <div class="disflx"><span class="red">{{shopSumarr.totalFee}}元</span></div>
                </div>
               
                <div class="statisticalitem">
                    <div>总手续费</div>
                    <div class="disflx"><span class="red">{{shopSumarr.fee}}元</span></div>

                </div>
                <div class="statisticalitem">
                    <div>退款笔数</div>
                    <div class="disflx"><span class="red">{{shopSumarr.total}}笔</span></div>
                </div>
            </div>
            <div class="tableBox">
                <el-table
                        ref="multipleTable"
                        :data="merchantarr"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        stripe
                        :header-cell-style="tableHeaderColor"
                        v-loading="loading"
                >
                    
                    <el-table-column prop="shopCode" label="门店号"></el-table-column>
                    <el-table-column prop="shopName" label="门店名"></el-table-column>
                    <el-table-column prop="merchantNo" label="商户号"></el-table-column>
                    <el-table-column prop="merchantName" label="商户名"></el-table-column>
                    <el-table-column prop="totalFee" label="退款金额"></el-table-column>
                    <el-table-column prop="fee" label="手续费"></el-table-column>
                    <el-table-column prop="total" label="退款笔数"></el-table-column>

                   
                </el-table>
                <div class="pagination">
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            @size-change="sizechange"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="combined"
                            :current-page.sync="cur_page"
                    ></el-pagination>
                </div>
            </div>
            <br>
            <br>

        </div>
    </div>
</template>

<script>
    import {
        getservice,
        shopRefundStat,
        shopSumByDay,
        storesRefundExportExcel,
        getlabelTagList,
        getDimensionTagList
    } from "@/api/api";

    export default {
        name: "baseform",
        data: function () {
            return {
                tableData: [],
                cur_page: 1,
                cur_size: 10,
                multipleSelection: [],
                visible: false,
                loading: true,
                exxxx: false,
                servicearr: [],
                merchantarr: [],
                combined: 10,
                pageCount: '',
                date: "",
                shopSumarr: {},
                conditions: {
                    stardate: "",
                    enddate: "",
                    keywords: "",
                    searchvalue: ""
                },
                dimension: '',//选择维度
                tagname: '',//标签名
                label_all: [],//标签模糊查询
                tagId: '',
                pickerOptions2: {
                    disabledDate(time) {
                        let nowDate = new Date()
                        let date = {
                            year: nowDate.getFullYear(),
                            month: nowDate.getMonth() + 1,
                            date: nowDate.getDate() - 1
                        }
                        let timeDate = date.year + '-' + date.month + '-' + date.date + ' 23:59:59';
                        let times = new Date(timeDate).getTime()
                        return time.getTime() > times
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            };
        },
        created() {
            this.userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
            this.$store.dispatch("getNewNum", 6);
            // console.log(this.$store.state.changableNum);
            // console.log(this.$store.state.showFooter);
            // console.log(this.$store.state.logininfo);
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            const year = start.getFullYear();
            const month = start.getMonth() + 1;
            const date = start.getDate();
            const date1 = year + '-' + month + '-' + date
            const date2 = year + '-' + month + '-' + date
            this.date = [date1, date2]
            this.shopstatistics()
            // this.shopSumByDay()
            // this.dimension_menu(6)
        },
        methods: {
            //修改thead 背景色
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
                }
            },
            renderheader(h, {column, $index}) {
                return h("span", {}, [
                    h("span", {}, column.label.split("?")[0]),
                    h("br"),
                    h("span", {}, column.label.split("?")[1])
                ]);
            },
            joininfo(val) {
                // console.log(val)
                this.$router.push({
                    path: "/businessstatisticsinfo",
                    query: {
                        no: val,
                    }
                });
            },
            // 刷新
            refresh() {
                this.loading = true
                this.shopstatistics()
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.shopstatistics()
                this.$nextTick(() => {
                    document.querySelectorAll('.content')[0].scrollTop = '0'
                });

            },
            // 分页数量
            sizechange(val) {
                this.cur_size = val
                this.shopstatistics()

                this.$nextTick(() => {
                    document.querySelectorAll('.content')[0].scrollTop = '0'
                });

            },
            //多选框
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
            },
            //  重置
            reset() {
                this.conditions.startDate = ''
                this.conditions.endDate = ''
                this.conditions.keywords = ''
                this.conditions.searchvalue = ''
                this.cur_page = 1
                this.dimension = ''
                this.tagname = ''
                this.tagId = ''
                // const start = new Date();
                // start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                // const year=start.getFullYear();
                // const month=start.getMonth()+1;
                // const date=start.getDate();
                // const date1 = year+'-'+month+ '-'+date+ ' ' +'00:00:00'
                // const date2 = year+'-'+month+ '-'+date+ ' ' +'23:59:59'
                // this.date = [date1,date2]
            },
            // 搜索
            soso() {
                this.cur_page = 1;
                this.loading = true
                this.shopstatistics()
                // this.shopSumByDay()
            },


            // 商户列表
            shopstatistics() {
                // console.log(this.conditions)
                shopRefundStat({
                    page: this.cur_page,
                    size: this.cur_size,
                    startDate: this.date[0],
                    endDate: this.date[1],
                    keywords: this.conditions.keywords,
                    searchvalue: this.conditions.searchvalue,
                    tagId: this.tagId
                }).then(res => {
                    // console.log(res);
                    if (res.code == 405) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/login');
                    } else {
                        this.merchantarr = res.data.statistics.list
                        this.shopSumarr = res.data
                        this.combined = res.pageInfo.recordCount
                        this.pageCount = res.pageInfo.pageCount
                        this.loading = false
                    }

                });
            },
            shopSumByDay() {
                shopSumByDay({
                    startDate: this.date[0],
                    endDate: this.date[1],
                    keywords: this.conditions.keywords,
                    searchvalue: this.conditions.searchvalue
                }).then(res => {
                    // console.log(res);
                    if (res.code == 405) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/login');
                    } else {
                        if (res.code == 200) {
                            this.shopSumarr = res.data
                        } else {
                            this.shopSumarr = {}
                        }
                    }

                });
            },
            // 导出
            merchantexcel() {
                this.exxxx = true;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                storesRefundExportExcel({
                    startDate: this.date[0],
                    endDate: this.date[1],
                    keywords: this.conditions.keywords,
                    searchvalue: this.conditions.searchvalue,
                    tagId: this.tagId
                }).then(res => {
                    if (res.data.code == 405) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/login');
                        loading.close();
                        this.exxxx = false;
                    } else if (res.data.code == 200) {
                        let elink = document.createElement('a');
                        elink.download = "门店交易统计.xls";
                        elink.href = res.data.data;
                        elink.click();
                        loading.close();
                        this.exxxx = false;
                    } else {
                        this.$message.error(res.data.message);
                        loading.close();
                        this.exxxx = false;
                    }
                })


            },
            //维度查询标签
            dimension_menu(v) {
                this.label_all = []
                getDimensionTagList({
                    roleId: v
                }).then(res => {
                    if (res.code == 405) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/login');
                    } else if (res.code == 200) {
                        for (var i = 0; i < res.data.length; i++) {
                            this.label_all.push({'value': res.data[i].tagName, 'id': res.data[i].tagId})
                        }
                    } else {
                        this.$message.error(res.message);
                    }
                })
            },
            //标签模糊
            querySearch_tag(queryString, cb) {
                // let servicearr = this.label_all;
                // let results = queryString
                //   ? servicearr.filter(this.createFilter(queryString))
                //   : servicearr;
                // // 调用 callback 返回建议列表的数据
                // cb(results);
                let that = this
                getDimensionTagList({
                    roleId: 6,
                    tagwords: this.tagname
                }).then(res => {
                    if (res.code == 405) {
                        sessionStorage.removeItem('token')
                        that.$router.push('/login');
                    } else if (res.code == 200) {
                        that.label_all = []
                        for (var i = 0; i < res.data.length; i++) {
                            that.label_all.push({'value': res.data[i].tagName, 'id': res.data[i].tagId})
                        }
                        let servicearr = that.label_all;
                        let results = queryString
                            ? servicearr.filter(that.createFilter(queryString))
                            : servicearr;
                        // 调用 callback 返回建议列表的数据
                        cb(results);
                    } else {
                        that.$message.error(res.message);
                    }
                })
            },
            createFilter(queryString) {
                return restaurant => {
                    return (
                        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
                        -1
                    );
                };
            },
            serviceid_tag(item) {
                console.log(item)
                this.tagId = item.id
            },
        }
    };
</script>
<style scoped lang='less'>
    .title {
        background: #fff;
        padding: 10px 10px;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
    }

    .name {
        width: 25%;
    }

    .screeningBox {
        width: 100%;
        display: flex;
    }

    .leftBox,
    .rightBox {
        width: 50%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .leftBox > .leftitem {
        margin-bottom: 15px;
    }

    .rightBox > .rightitem {
        margin-bottom: 15px;
    }

    .merchants {
        width: 50%;
    }

    .tableBox {
        margin-top: 20px;
    }

    .servicename {
        width: 60%;
    }

    .servicelevel {
        width: 20%;
    }

    .width20 {
        width: 20%;
    }

    .red {
        color: #f9607d;
    }

    .blue {
        color: #01AAEF;
    }

    .stitle {
        padding: 5px 0;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
            margin-left: 10px;
            margin-right: 5px;
        }
        .swarning {
            color: red;
        }
        .warning {
            color: #F9607D;
        }
    }

    .statistical {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #00152a;
        color: #fff;
        padding: 12px;
        box-sizing: border-box;
        .statisticalitem {
            flex: 1;
            text-align: center;
            border-right: 1px solid rgba(255, 255, 255, 0.445);
            font-size: 13px;
            line-height: 180%;
            &:nth-last-child(1) {
                border-right: none;
            }
            .red {
                color: #f9607d;
                font-size: 18px;
            }
            .blue {
                color: #01AAEF;
                font-size: 18px;
            }
        }
    }

    .disflx {
        .blue {
            margin-left: 30px;
        }
    }
</style>